import React, { useState, useEffect, useRef } from "react";
import { Popconfirm, Button, Tag, message } from "antd";
import { PageContainer } from "@ant-design/pro-layout";
import { LeftOutlined } from "@ant-design/icons";
import ProTable from "@ant-design/pro-table";
import { history, useLocation } from "umi";
import useCommonTable from "@/hooks/useCommonTable";

import { updateStatus } from "@/api/specification";
import { fetchSpecList, removeSpec } from "@/api/package";

import { disableStatusOptions } from "@/const";
import useUpdateStatus from "@/hooks/useUpdateStatus";

export default () => {
  const actionRef = useRef();
  const { id, cycle, type, specification } = useLocation().query;
  const columns = [
    {
      title: "规格名称",
      dataIndex: "specName",
    },
    {
      title: "是否上架",
      dataIndex: "status",
      valueType: "select",
      width: 200,
      fieldProps: {
        options: disableStatusOptions,
      },
      search: false,
      render: (_, record) => {
        return useUpdateStatus(
          updateStatus,
          record,
          actionRef,
          null,
          false,
          "status"
        );
      },
    },
  ];
  return (
    <PageContainer
      header={{
        title: (
          <div className="pointer" onClick={() => history.goBack()}>
            <LeftOutlined style={{ marginRight: 10 }} />
            规格管理
          </div>
        ),
        breadcrumb: {},
      }}
    >
      {useCommonTable({
        actionRef,
        title: "规格",
        params: {
          schoolbagId: id,
        },
        columns,
        modalWidth: 700,
        fetchList: fetchSpecList,
        renderAdd: (record) => {
          return (
            <Button
              type="primary"
              onClick={async () => {
                history.push(
                  `/package/index/specification/edit?schoolbagId=${id}&cycle=${cycle}&specification=${specification}`
                );
              }}
            >
              新增规格
            </Button>
          );
        },
        renderEdit: (record) => {
          return (
            <>
              <Button
                key="add"
                type="ghost"
                onClick={() => {
                  history.push(
                    `/package/index/group?id=${id}&type=${type}&specId=${record.id}`
                  );
                }}
              >
                分组管理
              </Button>
              <Button
                type="primary"
                onClick={async () => {
                  history.push(
                    `/package/index/specification/edit?schoolbagId=${id}&cycle=${cycle}&specId=${record.id}`
                  );
                }}
              >
                编辑
              </Button>
            </>
          );
        },
        remove: removeSpec,
        layout: "horizontal",
        actionColumnWidth: 200,
        showCheckbox: false,
      })}
    </PageContainer>
  );
};
